// 按钮
.btn {
  display: inline-block;
  padding: 20rpx 60rpx;
  border-radius: 60rpx;
  font-size: 28rpx;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  margin-left: unset;
  margin-right: unset;

  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: $box-shadow;

  &::after {
    display: none;
  }

  & + & {
    margin-left: 30rpx;
  }
  &-primary {
    background-color: $color-primary;
    color: $uni-white;
  }

  &-success {
    background-color: $uni-success;
    color: $uni-white;
  }

  &-warning {
    background-color: $uni-warning;
    color: $uni-white;
  }

  &-danger,
  &-error {
    background-color: $uni-error;
    color: $uni-white;
  }

  &-info {
    background-color: $uni-info;
    color: $uni-white;
  }

  &-default {
    background-color: $uni-white;
    color: $uni-base-color;
  }

  &-no-shadow {
    box-shadow: none;
  }

  &-plain {
    background-color: $uni-white;
    color: $uni-base-color;
    &-primary {
      color: $color-primary;
    }
    &-success {
      color: $uni-success;
    }
    &-warning {
      color: $uni-warning;
    }
    &-error {
      color: $uni-error;
    }
    &-info {
      color: $uni-info;
    }
  }

  &-round {
    border-radius: 50rpx;
  }

  &-circle {
    border-radius: 50%;
  }

  &-block {
    width: 100%;

    & + & {
      margin-left: unset;
    }
  }

  &-mini {
    font-size: 20rpx;
    padding: 10rpx 20rpx;
  }

  &-small {
    font-size: 24rpx;
    padding: 10rpx 20rpx;
  }

  &-normal {
    font-size: 28rpx;
    padding: 10rpx 20rpx;
  }

  &-large {
    height: 1.4rem;
    min-height: 1.4rem;
    padding: 20rpx 60rpx;
  }

  &-disabled {
    opacity: 0.5;
  }

  &-loading {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10rpx;
      margin-left: -10rpx;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      border: 2rpx solid $uni-white;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
    }
  }

  &-post {
    background-color: $color-primary;
    width: 72rpx;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: fixed;
    bottom: 20rpx;
    right: 20rpx;
    z-index: 88;
    color: #fff;
    font-size: 30rpx;
    box-shadow: $box-shadow;
  }

  &-tran {
    position: relative;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
      display: none;
    }
    &:active {
      background-color: transparent;
    }

    &-bg {
      position: relative;
      z-index: 1;
    }
    &-front {
      position: relative;
      z-index: 2;
      font-style: normal;
    }
  }
}

.custom-btn {
  padding: 6rpx;
  background-color: rgba($color: $color-primary, $alpha: 0.25);
  border-radius: 72rpx;
  &::after {
    display: none;
  }

  &-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 72rpx;
    padding: 0 40rpx;
    border-radius: 72rpx;
    background: #fff;
    color: $color-primary;
    font-size: 36rpx;
    font-weight: 500;

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      padding: 0 40rpx;
      margin-left: -40rpx;
      margin-right: -40rpx;
      background: transparent;
      color: $color-primary;
      font-size: 36rpx;
      font-weight: 500;
      border-radius: 72rpx;

      &::after {
        display: none;
      }
    }
  }

  &.disabled {
    background-color: rgba($color: $color-primary, $alpha: 0.1);
    &-inner {
      color: rgba($color: $color-primary, $alpha: 0.5);
    }
  }

  &-primary {
    background-color: $color-primary;
    background-image: linear-gradient(
      180deg,
      lighten($color-primary, 20) 0%,
      darken($color-primary, 20) 100%
    );
    .custom-btn-inner {
      background: $color-primary;
      color: #fff;
      button {
        color: #fff;
      }
    }
  }

  &-small {
    .custom-btn-inner {
      padding: 0 20rpx;
      height: 60rpx;
      font-size: 28rpx;
      button {
        height: 60rpx;
        padding: 0 20rpx;
        margin-left: -20rpx;
        margin-right: -20rpx;
        font-size: 28rpx;
      }
    }
  }
}
